<template>
  <div>
    <div class="header-title">
      <p><i class="el-icon-warning"></i> 注意密码保护,不要给外人泄露密码!</p>
    </div>
    <div class="login-title">
      <strong @click="switchCom(componentList[0],'pwd')" :class="{action:isAction}">密码登录</strong>
      <strong @click="switchCom(componentList[1],'scan')" :class="{action:!isAction}">扫码登录</strong>
    </div>
    <div>
      <keep-alive>
        <component :is="currentComponent"></component>
      </keep-alive>
    </div>
  </div>
</template>

<script>
  import PwLogin from './pwdLogin';
  import ScanLogin from './scanLogin';

  export default {
    data() {
      return {
        name: "login",
        isAction: true,
        currentComponent: PwLogin,
        componentList: [
          PwLogin,
          ScanLogin
        ]
      }
    },
    components: {
      PwLogin,
      ScanLogin
    },
    methods: {
      switchCom(currentCom, value) {
        if (value === 'pwd' ) {
          this.isAction = true;
        }else if(value === 'scan'){
          this.isAction = false;
        }
        this.currentComponent = currentCom;
      }
    }
  }
</script>

<style scoped>
  * {
    margin: 0;
    padding: 0;
  }

  .header-title {
    text-align: center;
    font-size: 14px;
    background-color: rgba(255, 0, 0, 0.17);
    padding: 10px 0;
  }

  .login-title {
    border-bottom: 2px #8c939d solid;
    margin: 5px 0;
  }

  .login-title strong {
    /*font-size: 20px;*/
    text-align: center;
    display: inline-block;
    width: 50%;
    margin: 0 -3px;
    padding: 5px 0;
  }

  .login-title strong:hover {
    color: red;
    cursor: pointer;
    font-size: 20px;
  }

  .action {
    color: red;
    font-size: 20px;
  }

</style>
